<template>
  <div class="login-all">
  <div class="container">
    <div class="login">
      <div class="login_logo">
        <p class="p1"><span style="font-weight:600;color:#FFFFFF;font-size: 35px; ;">美租寓租房管理系统</span></p>
        <p class="p2"><span style="font-weight:500;color:#FFFFFF;font-size:20px;;">Rental Management System</span>
        </p>
        <img class="img1"
             src="../image/web2.webp">
      </div>
      <div class="login_form">
        <el-row :gutter="20">
          <el-col :span="20" :offset="2">
            <h1>{{content[flag]}}</h1>
              <el-tabs type="" v-model="flag">
                <el-tab-pane label="账号登录" :key="0">
                  <el-form :model="user" :rules="userRules" ref="loginForm" class="login-form">
                  <el-form-item prop="phone">
                    <el-input v-model="user.phone" placeholder="请输入手机号" clearable prefix-icon="el-icon-user" style="width: 100%"></el-input>
                  </el-form-item>
                  <el-form-item prop="password">
                    <el-input type="password" v-model="user.password" placeholder="请输入密码" clearable show-password prefix-icon="el-icon-lock" style="width: 100%"></el-input>
                  </el-form-item>
                  <el-form-item prop="captcharcode">
                    <div style="display:flex;flex-direction:row;">
                      <el-input type="" v-model="user.captcharcode" placeholder="请输入4位验证码" clearable prefix-icon="el-icon-tickets">
                      </el-input>
                      <template><canvas class="canvas" @click="drawCode"></canvas></template>
                    </div>

                  </el-form-item>
                  <el-form-item>
                    <!--
                @事件名。所有事件使用的是Jquery事件 click
            -->
                    <el-button type="primary" @click="login" round style="width: 100%;">登录</el-button>
                  </el-form-item>
                  </el-form>
                </el-tab-pane>
                <el-tab-pane label="账号注册" :key="1" @click="drawCode">
                  <el-form :model="user" :rules="userRules" ref="registerFrom" class="login-form">
                  <el-form-item prop="phone">
                    <el-input v-model="user.registerPhone" placeholder="请输入11位手机号" clearable
                              prefix-icon="el-icon-user" style="width: 100%"></el-input>
                  </el-form-item>
                  <el-form-item prop="registerPassword">
                    <!--
                v-model:双向数据绑定：页面改变内存也会改变
                :属性名：单项数据绑定。页面的改变不影响内存的改变。
            -->
                    <el-input type="registerPassword" v-model="user.registerPassword" placeholder="请输入密码"
                              clearable show-password prefix-icon="el-icon-lock" style="width: 100%"></el-input>

                  </el-form-item>
                  <el-form-item prop="passwordTo">
                    <!--
                v-model:双向数据绑定：页面改变内存也会改变
                :属性名：单项数据绑定。页面的改变不影响内存的改变。
            -->
                    <el-input type="password" v-model="user.passwordTo" placeholder="请输再次输入密码" clearable
                              show-password prefix-icon="el-icon-lock" style="width: 100%"></el-input>

                  </el-form-item>
                  <el-form-item prop="captcharcode1">
                    <div style="display:flex;flex-direction:row;">
                      <el-input type="" v-model="user.captcharcode1" placeholder="请输入4位验证码" clearable prefix-icon="el-icon-tickets">

                      </el-input>
                      <template><canvas class="canvas1" @click="drawCode1"></canvas></template>
                    </div>
                  </el-form-item>
                  <el-form-item>
                    <!--
                @事件名。所有事件使用的是Jquery事件 click
            -->
                    <el-button type="primary" @click="register" round
                               style="width: 100%;">注册</el-button>
                  </el-form-item>
                  </el-form>
                </el-tab-pane>

              </el-tabs>
          </el-col>
        </el-row>
      </div>
    </div>

  </div>
  </div>
</template>
<!-- 事件和数据-->
<script>
import axios from 'axios';

export default {
  name: 'Login',
  data() {
    return {
      content:['用户登录','用户注册'],
      user: {
        username: '',
        password: '',
        captcharcode:'',
        captcharcode1:'',
        code: '',
        phone: '',
        registerPhone:'',
        registerPassword: '',
        passwordTo: '',
      },
      userRules: { //校验规则的声明
        username: [ //需要校验的字段 this：不同属性的内容之间相互调用必须使用this关键字
          //validator:校验方式
          //trigger:触发时机
          { validator: this.checkUsername, trigger: 'blur' }
        ],
        password: [
          { validator: this.checkPassword, trigger: 'blur' }
        ],
        phone: [
          { validator: this.checkPhone, trigger: 'blur' }
        ],
        phone2: [
          { validator: this.checkPhone, trigger: 'blur' }
        ],
        registerPassword: [
          { validator: this.checkRegisterPassword, trigger: 'blur' }
        ],
        passwordTo: [
          { validator: this.checkPasswordTo, trigger: 'blur' }
        ],
        captcharcode: [
          { validator: this.checkCaptcharcode, trigger: 'blur' }
        ],
        captcharcode1: [
          { validator: this.checkCaptcharcode1, trigger: 'blur' }
        ],
        code: [
          { validator: this.checkCode, trigger: 'blur' }
        ],
      },
      flag: 0,
    }
  },
  mounted() {
    this.drawCode();
    this.drawCode1();
  },
  methods: { //方法属性，定义当前页面使用到所有方法
    checkUsername(rule, value, callback) {
      if (value === '' && this.flag == '0') {
        callback(new Error("请输入登录用户名！"));
      } else {
        callback();
      }
    },
    checkPassword(rule, value, callback) {
      if (value === '' && this.flag == '0') {
        callback(new Error("请输入密码！"));
      } else {
        callback();
      }
    },
    checkPhone(rule, value, callback) {
      var reg = /^1[3|5|6|7|8|9][0-9]{9}$/;
      if (value === '' && this.flag == '1') {
        callback(new Error("手机号不能为空！"));
      } else if (!reg.test(value)) {
        callback(new Error("请输入正确手机号！"));
      } else {
        callback();
      }
    },
    checkRegisterPassword(rule, value, callback) {
      if (value === '' && this.flag == '1') {
        callback(new Error("密码不能为空！"));
      } else if (value.length < 6 || value.length > 12) {
        callback(new Error("密码必须在6-12位任意字符组成！"));
      } else {
        callback();
      }
    },
    checkPasswordTo(rule, value, callback) {
      if (value !== this.user.registerPassword) {
        callback(new Error("两次密码输入不一致！"));
      } else {
        callback();
      }
    },
    checkCode(rule, value, callback) {
      callback();
    },
    checkCaptcharcode(rule, value, callback) {
      if (value === '') {
        callback(new Error("请输入验证码！"));
      }else if(value.length !== 4){
        callback(new Error("验证码长度为4位！"));
      }else if(value !== this.codes){
        callback(new Error("验证码错误！"));
      }else {
        callback();
      }
    },
    checkCaptcharcode1(rule, value, callback) {
      if (value === '') {
        callback(new Error("请输入验证码！"));
      }else if(value.length !== 4){
        callback(new Error("验证码长度为4位！"));
      }else if(value !== this.codes1){
        callback(new Error("验证码错误！"));
      }else {
        callback();
      }
    },
    login() {
      //获取当前的ref属性的引用对象
      this.$refs.loginForm.validate((valid) => {
        if (valid) {
          axios({
            url: "http://localhost:8089/admin/login",
            method: "post",
            params: {
              phone: this.user.phone,
              password: this.user.password
            }
          }).then(res => {
            if (res.data.msg) {
              localStorage.setItem('admin', JSON.stringify(res.data.msg))
              this.$router.replace('/home');
              this.$message.success('登录成功！')
            } else {
              this.$message.error('密码或账号错误！')
            }

          })
        }
      })
        //提交数据到服务器做登陆操作

    },
    register() {
      this.$refs.registerFrom.validate((valid) => {
        if (valid) {
          axios({
            url: "http://localhost:8089/admin/insert",
            method: "post",
            data: {
              phone: this.user.registerPhone,
              password: this.user.registerPassword
            }
          }).then(res => {
            if (res.data.msg =='OK') {
              this.$message.success('注册成功！')
            } else if(res.data.msg=="手机格式不合法"){
              this.$message.error('电话格式错误')
            }else {
              this.$message.error('账号已被注册')
            }
          })
        }
      })
    },
    drawCode(){
      var canvas = document.querySelector('.canvas');
      var ctx = canvas.getContext('2d');
      ctx.clearRect(0, 0, 500, 250);
      ctx.fillStyle = '#eee';
      ctx.fillRect(0, 0, 500, 250);

      var arr = ['2','3','4','5','6','7','8','9','a','b','c','d','e','f','g','h','i','j','k','m','n','p','q','r','s','t','u','v','w','x','y'];
      var code = '';
      for(var i = 0; i < 4; i++){
        var index = Math.floor(Math.random()*arr.length);
        code += arr[index];
        this.codes = code;
      }
      ctx.font = '60px Arial';
      ctx.fillStyle = '#000';
      ctx.textBaseline = 'middle';
      ctx.textAlign = 'center';
      ctx.fillText(code, 150, 80);
      //生成干扰线
      for(var i = 0; i < 8; i++){
        ctx.beginPath();
        ctx.moveTo(Math.floor(Math.random()*300), Math.floor(Math.random()*100));
        ctx.lineTo(Math.floor(Math.random()*300), Math.floor(Math.random()*150));
        ctx.strokeStyle = '#000';
        ctx.stroke();
      }
      //生成干扰点
      for(var i = 0; i < 50; i++){
        ctx.beginPath();
        ctx.arc(Math.floor(Math.random()*500), Math.floor(Math.random()*150), 1, 0, 2*Math.PI);
        ctx.closePath();
        ctx.fillStyle = '#000';
        ctx.fill();
      }
    },
    drawCode1(){
      var canvas1 = document.querySelector('.canvas1');
      var ctx = canvas1.getContext('2d');
      ctx.clearRect(0, 0, 500, 250);
      ctx.fillStyle = '#eee';
      ctx.fillRect(0, 0, 500, 250);

      var arr = ['2','3','4','5','6','7','8','9','a','b','c','d','e','f','g','h','i','j','k','m','n','p','q','r','s','t','u','v','w','x','y'];
      var code = '';
      for(var i = 0; i < 4; i++){
        var index = Math.floor(Math.random()*arr.length);
        code += arr[index];
        this.codes1 = code;
      }
      ctx.font = '60px Arial';
      ctx.fillStyle = '#000';
      ctx.textBaseline = 'middle';
      ctx.textAlign = 'center';
      ctx.fillText(code, 150, 80);
      //生成干扰线
      for(var i = 0; i < 8; i++){
        ctx.beginPath();
        ctx.moveTo(Math.floor(Math.random()*300), Math.floor(Math.random()*100));
        ctx.lineTo(Math.floor(Math.random()*300), Math.floor(Math.random()*150));
        ctx.strokeStyle = '#000';
        ctx.stroke();
      }
      //生成干扰点
      for(var i = 0; i < 50; i++){
        ctx.beginPath();
        ctx.arc(Math.floor(Math.random()*500), Math.floor(Math.random()*150), 1, 0, 2*Math.PI);
        ctx.closePath();
        ctx.fillStyle = '#000';
        ctx.fill();
      }
    },
  },

}
</script>
<!-- css
scoped：只作用于当前页面
-->
<style>
  .login-all{
    width: 99vw;
    height: 97vh;
    background: url("../image/down.jpeg") no-repeat;
    background-size: cover;
  }
.container {
  width: 100%;
  height: 100%;

}

.login {
  border-width: 0px;
  position: absolute;
  left: 0px;
  top: 0px;
  width: 60%;
  height: 540px;
  background: inherit;
  background-color: rgba(255, 255, 255, 1);
  border: none;
  border-radius: 5px;
  -moz-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.149019607843137);
  -webkit-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.149019607843137);
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.149019607843137);
  font-family: '微软雅黑', sans-serif;
  font-weight: 400;
  font-style: normal;
  text-align: left;
  line-height: 24px;
  margin-left: 20%;
  margin-top: 5%;
  display: flex;
  flex-direction: row;
}

.login_logo {
  text-align: center;
  flex: 0.4;
  width: 330px;
  height: 540px;
  background: inherit;
  background-color: rgb(64, 160, 255);

}

.login_form {
  flex: 0.6;
}
  .canvas{
    width: 100px;
    height: 40px;
    margin-left: 10px;
  }
  .canvas1{
    width: 100px;
    height: 40px;
    margin-left: 10px;
  }

.p1 {
  margin-top: 40%;
}
.img1 {
  margin-top: 10%;
  width: 240px;
  height: 170px;
}

h1 {
  font-size: 50px;
  text-align: center;
  color: #ddd;
  font-weight: 500;
  margin-top: 15%;
}
.login-form{
  border: none;

}
.el-tab-pane {
  padding: 20px 20px 10px 20px;
}

.el-tabs__item {
  width: 115%;
  height: 50px;
  line-height: 50px;
  text-align: center;
}
  .flex-center {
    display: flex;
    align-items: center;
  }
</style>